<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>学生评语列表-云校通-教师</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<body ontouchstart id="week-comment-detail">
	<div class="mb55">
		<div class="weui-header bg-blue"> 
	  		<div class="weui-header-left"> <a onclick="back()" href="javascript:;" class="icon icon-109 f-white">返回</a> </div>
	    	<h1 class="weui-header-title">第${weekNo }周学生评语列表</h1>
	    </div>
		<div class="page-bd xs_c_search">
			<ul>
				<li class="xs_c_search-first">
	                <div class="weui-flex js-category">
	                    <p class="weui-flex-item"><img class="middle" src="<%=basePath %>/images/weichakan.png"/> 未回评（<span id="noCount"></span>）</p>
	                    <i class="icon icon-74"></i>
	                </div>
	                <div class="page-category js-categoryInner">
	                    <ul class="list_5" id="noRead">
	                    </ul>
	                </div>
	            </li>
	            <li class="">
	                <div class="weui-flex js-category">
	                    <p class="weui-flex-item"><img class="middle" src="<%=basePath %>/images/yichakan.png"/> 已回评（<span id="hadCount"></span>）</p>
	                    <i class="icon icon-74"></i>
	                </div>
	                <div class="page-category js-categoryInner">
	                    <div id="studentList"></div>
	                </div>
	            </li>
			</ul>
		</div>
	</div>
	<div style="display: none;" id="parentCommentTemplate">
		<div class="pingyu1">
		    <header>
		      <img src="<%=basePath %>/images/iconZ.png">
		      <h4>学生自评</h4>
		    </header>
		    <div class="dianping pb0 studentComment">
		    </div>
		</div>
		<div class="pingyu1">
		    <header>
		      <img src="<%=basePath %>/images/iconZ.png">
		      <h4>家长回评</h4>
		    </header>
		    <div class="dianping">
		      <ul class="parentTypeList">
		      </ul>
			</div>
			<p class="artical parentComment"></p>
		</div>
	</div>
</body>
<script type="text/javascript">
	var studentData = null;
	$(function() {
		loadStudent();
		$('.js-category').click(function(){
			$parent = $(this).parent('li');
		    if($parent.hasClass('js-show')){
                $parent.removeClass('js-show');
                $(this).children('i').removeClass('icon-35').addClass('icon-74');
            }else{
                $parent.siblings().removeClass('js-show');
                $parent.addClass('js-show');
                $(this).children('i').removeClass('icon-74').addClass('icon-35');
                $parent.siblings().find('i').removeClass('icon-35').addClass('icon-74');
            }
	   });
	})
	function joinParentComment(studentId) {
		var data = null;
		for(var i in studentData) {
			if(studentData[i].studentId == studentId) {
				data = studentData[i];
				break;
			}
		}
		initTypeHtml(data.parentCommentType);
		initStudentCommentHtml(data.studentCommentContent);
		$("#parentCommentTemplate .parentComment").html(data.parentCommentContent);
		return $("#parentCommentTemplate").html();
	}
	function loadStudent() {
		$.ajax({
			url: basePath + "/ls/week/comment/lookList/data",
	        type: 'POST',
	        dataType: 'json',
	        data: {
	        	weekNo: '${weekNo}',
	        	grade: '${grade}',
	        	clazz: '${clazz}'
	        },
			success : function(data) {
				studentData = data;
				var hadHtml = '', hadCount = 0, noHtml = '', noCount = 0;
				for(var i in data) {
					if(data[i].status == 2) {
						hadCount += 1;
						hadHtml += '<div class="weui_panel mt0" id="studentList"><div class="weui_panel_bd">\
				            <div class="weui_media_box weui_media_small_appmsg">\
				                <div class="weui_cells weui_cells_access mt0">\
				                    <a href="#menu_'+data[i].studentId+'" class="weui_cell" onclick="selectmenu('+data[i].studentId+');">\
				                        <div class="weui_cell_bd weui_cell_primary">\
				                            <p>'+ data[i].studentName +'</p>\
				                        </div>\
				                        <span id="cell_'+data[i].studentId+'" class="icon f-green icon-74"></span>\
				                    </a>\
				                </div>\
				            </div>\
				        </div>\
				        <div class="menu_class" style="display: none;" id="menu_'+data[i].studentId+'">\
					    </div></div>';
					}else {
						noCount += 1;
						noHtml += '<li>' + data[i].studentName + '</li>';
					}
				}
				$("#studentList").html(hadHtml);
				$("#noRead").html(noHtml);
				$("#hadCount").html(hadCount);
				$("#noCount").html(noCount);
			}, error:function(){
				$.alert("查询异常","");
			}
		})
	}
	
	function initStudentCommentHtml(studentComment) {
		var array = studentComment.split("b,b");
		var html = "";
		for(var i in array) {
			var array1 = array[i].split("a|a");
			html += '<div class="weui_cells weui_cells_form mt0">\
	    		<div class="weui_cells_title f-green">'+array1[0]+'</div>\
	            <div class="weui_cell">\
	                <div class="weui_cell_bd weui_cell_primary">\
	                     <p style="width: 100%;margin-left: 0;margin-top: 5px;">'+array1[1]+'</p>\
	                </div>\
	            </div>\
	        </div>';
		}
		$("#parentCommentTemplate .studentComment").html(html);
	}
	function initTypeHtml(commentType) {
		var teaTypeList = commentType.split(",");
		var teaTypeHtml = "";
		for(var i in teaTypeList) {
			var itm = teaTypeList[i];
			var array = itm.split("|");
			teaTypeHtml += '<li>\
		        <img src="<%=basePath%>/images/iconJ.png"><p>'+array[0]+'</p>\
		        <div class="star-box">\
		          <span class="icon'+(parseInt(array[1]) >= 1 ? " icon-48 f-red" : " icon-49")+'"></span>\
		          <span class="icon'+(parseInt(array[1]) >= 2 ? " icon-48 f-red" : " icon-49")+'"></span>\
		          <span class="icon'+(parseInt(array[1]) >= 3 ? " icon-48 f-red" : " icon-49")+'"></span>\
		          <span class="icon'+(parseInt(array[1]) >= 4 ? " icon-48 f-red" : " icon-49")+'"></span>\
		          <span class="icon'+(parseInt(array[1]) >= 5 ? " icon-48 f-red" : " icon-49")+'"></span>\
		        </div>\
		      </li>';
		}
		$("#parentCommentTemplate .parentTypeList").html(teaTypeHtml);
	}
		
	function selectmenu(n){
		var eleMore = document.getElementById("menu_"+n);
		if(eleMore.style.display=="none"){
			$(".menu_class").hide();
			eleMore.style.display = 'block';
			$("#cell_"+n).removeClass("icon-74");
			$("#cell_"+n).addClass("icon-35 ");
			if(eleMore.innerText == '') {
				eleMore.innerHTML = joinParentComment(n);
			}
		}else{
			eleMore.style.display = 'none';
			$("#cell_"+n).removeClass("icon-35");
			$("#cell_"+n).addClass("icon-74");
		}
	}
</script>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
</html>